<template>
  <div class="audit-visual">
    <el-tabs
      v-if="localConfig!==null"
      v-model="activeName"
      type="card"
      @tab-click="onTabsClick"
    >
      <el-tab-pane
        label="物理设施"
        name="physics-facility"
      >
        <PhysicsFacility
          :plan-id="plan_id"
          :local-config="localConfig"
          :useraccount="useraccount"
          :active-id="actId"
          :active-name="actName"
          @form-data="formData"
        />
      </el-tab-pane>
      <!-- <el-tab-pane
        label="光路调度"
        name="lightpath-dispatch"
        disabled
      >
        光路调度
      </el-tab-pane> -->
      <!-- <el-tab-pane
        label="端子面板"
        name="terminal-panel"
      >
        <PtpView
          :plan-id="plan_id"
          :local-config="localConfig"
        />
      </el-tab-pane> -->
      <!-- <el-tab-pane
        label="审核记录"
        name="audit-log"
      >
        <AuditTable
          :is-table="isTable"
          :plan-id="plan_id"
          :res-data="resData"
          :total="resData.total"
          :local-config="localConfig"
          @audit-info="auditData"
        />
      </el-tab-pane> -->
    </el-tabs>
    <div
      v-if="activeName === 'physics-facility'&&(companyid === '498' || showBtn)"
      class="all-audit"
    >
      <!-- <div
      v-if="false"
      class="all-audit"
    > -->
      <el-button
        class="btn-audit"
        type="primary"
        @click="showDialog"
      >
        批量审批
      </el-button>
    </div>
    <div
      class="dialog-style"
    >
      <el-dialog
        :visible.sync="dialogVisible"
        width="750px"
        :close-on-press-escape="false"
      >
        <span
          slot="title"
          class="dialog-title"
        >
          <TcAwesomeIcon
            name="bars"
            class="title-icon"
          />{{ resTitle }}
        </span>
        <ResInfo
          ref="resinfo"
          :plan-id="plan_id"
          info-type="2"
          :audit-data="infodata"
          :useraccount="useraccount"
          :active-id="actId"
          :active-name="actName"
          :companyid="companyid"
          @closed="close"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getUrlParam } from '@/api/service/gisShow2020';
import { getLocalConfig } from '@/init';
import PhysicsFacility from './components/physics-facility/PhysicsFacility.vue';
// import AuditTable from './components/audit-table/AuditTable.vue';
import ResInfo from './components/physics-facility/components/res-info/ResInfo.vue';
// import PtpView from './components/ptp-view/PtpView.vue';

export default {
  name: 'AuditVisual',
  components: {
    PhysicsFacility,
    // AuditTable,
    ResInfo,
    // PtpView,
  },
  data() {
    return {
      activeName: 'physics-facility',
      // 四个url参数
      plan_id: '',
      useraccount: '',
      actName: '',
      actId: '',
      companyid: '',
      // 资源总数
      total: 0,
      // 本地配置文件
      localConfig: null,
      // 审核表单
      resData: {},
      // 点击表格标签
      isTable: false,
      // 对话框
      dialogVisible: false,
      resTitle: '批量审核',
      infodata: '',
      showBtn: false,
    };
  },
  async mounted() {
    const that = this;
    that.plan_id = getUrlParam('plan_id');
    that.companyid = getUrlParam('companyid');
    that.useraccount = getUrlParam('useraccount');
    that.actName = getUrlParam('activeName');
    that.actId = getUrlParam('activeId');
    that.localConfig = await getLocalConfig();
    if (that.useraccount.indexOf('hn_') > -1) {
      this.showBtn = true;
    } else {
      this.showBtn = false;
    }
    console.log(that.plan_id, that.localConfig);
  },
  methods: {
    // 初始化请求首页左侧树级审核界面table表格数据
    init() {

    },
    // 审核数据
    auditData(data) {
      console.log(data);
      this.infodata = data;
    },
    showDialog() {
      this.dialogVisible = true;
    },
    onTabsClick() {
      if (this.activeName === 'audit-log') {
        this.isTable = true;
      } else {
        this.isTable = false;
      }
    },
    // 左侧树数据
    formData(dataObj) {
      this.resData = dataObj;
    },
    // 关闭弹框
    close() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
  .audit-visual {
    height: 100%;
    /deep/ .el-tabs {
      height: 100%;
      display: flex;
      flex-direction: column;
      .el-tabs__header {
        margin:0;
      }
      .el-tabs__content {
        flex: 1;
        .el-tab-pane {
          // margin-left:2%;
          // margin-top:2%;
          // margin-right:2%;
          // margin-bottom:2%;
          height: 100%;
        }
      }
    }
  }
  .all-audit{
    // position: relative;
    // width: 82px;
    // position: relative;
    // top: calc(-100vh + 4px);
    // margin: 0 0 0 95vw;
    margin-top: calc(-100vh + 4px);
    .btn-audit{
      position: relative;
      margin-left: calc(100vw - 102px);
    }
  }
  .dialog-style{
    width:700px;
    height:500px;
  }
  /deep/ .el-dialog__header{
    height: 38px;
    background: #EBF0F3;
    padding: 0;
  }
  .dialog-title{
    line-height: 38px;
    font-size: 14px;
    padding-left: 22px;
    font-weight: bold;
    .title-icon{
      padding-right: 10px;
    }
  }
  /deep/ .el-dialog__headerbtn{
    top: 8px;
  }
  /deep/ .el-dialog__body{
    padding: 14px 30px 24px;
  }
  /deep/ .el-dialog{
    margin-top: 10vh !important;
  }
</style>
